<template>
  <div>
    <h1>v-model 钱数 {{ money }} {{ pageNo }}</h1>
    <input type="text" v-model="info">

    <!-- <Child :modelValue="money" @update:modelValue="handler"/> -->
    <!-- 
      v-model组件身上使用
        1. 相当于给子组件彻底props[modelValue] = 10000
        2. 相当于给子组件绑定自定义事件 update:modelValue

      vue2: 绑定的value，绑定的是input事件
     -->
    <Child v-model="money"/>
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize" @update:pageNo="handler1"/>
  </div>
</template>

<script setup lang="ts">
  // v-model指令：收集表单数据，数据双向绑定
  // v-model也可以实现组件之间的通信，实现父子之间数据同步的业务
  import { ref } from 'vue'
  import Child from './Child.vue';
  import Child1 from './Child1.vue';
  const info = ref('')

  let money = ref(10000)
  const handler = (num: number) => {
    money.value = num
  }

  let pageNo = ref(1)
  let pageSize = ref(10)

  const handler1 = (page: number) => {
    pageNo.value += page
  }
</script>

<style scoped>
</style>